<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM3-操作元素的内容和样式</title>
    <style>
        #app {
            width: 400px;
            height: 200px;
            padding: 10px;
            border: 1px solid black;
        }

        .green {
            background-color: lightgreen;
        }

        .red {
            color: lightcoral;
        }
    </style>
</head>

<body>
    <div id="app">
        你好
    </div>
    <script>
        //01.获取div
        let app = document.querySelector("#app")
        setTimeout(() => {
            //02.设置div

            // innerText属性，设置/获取 元素的文本内容
            // app.innerText = 'Hello'
            // app.innerText = '<button>Hello</button>'   //设置文本
            // let str = app.innerText                    //获取文本
            // console.log(str);

            // innerHTML属性，设置/获取 元素的HTML内容
            // app.innerHTML = "Hello"
            app.innerHTML = '<button>Hello</button>你好世界'

            //给元素加样式有两种方式：1.style属性 2.classList属性
            // 通过style属性设置行内样式
            // app.style.backgroundColor = 'lightblue'
            // 通过classList属性添加类选择器样式：add()方法添加类选择器，remove()方法删除类选择器
            app.classList.add('green')
            app.classList.add('red')
        }, 1000);

        setTimeout(() => {
            // 删除green样式
            app.classList.remove('green')
        }, 3000);
    </script>
</body>

</html>